import React, { useEffect, useState, Fragment } from 'react';
import { createBrowserHistory } from "history";
// COM
import { IonContent, IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge, IonRouterOutlet } from '@ionic/react';
import { calendar, personCircle, map, informationCircle } from 'ionicons/icons';

// CSS
import IndexStyle from "./index.module.scss";


// 取出底部导航栏数据
import IndexBottomData from "../../data/configuration.json";

// data
const IndexBottom = (p) => {
    const data = IndexBottomData.indexBottom;
    const ActiveIndex =p.activeIndex;
    let History = p.parent.history;
    const ButtonClick = (e,i)=>{
        console.log(p);
        History.push({
            pathname:e.router,
            query:{
                index:i
            }
        });
    };
    // 重写底部导航栏
    return (
        <div className={IndexStyle.flexView}>
            {
                data.length!=0?data.map((item,index)=>{
                    return (
                        <div key={'bottomTab_'+index} data-router={item.router} onClick={()=>{ButtonClick(item,index)}} className={`${[IndexStyle.liView].join(" ")}`}>
                            <IonIcon className={`${[ActiveIndex==index?IndexStyle.concaveD:IndexStyle.flat,IndexStyle.iconFont].join(" ")}`} icon={item.icon} />
                        </div>
                    )
                }):<Fragment />
            }
        </div>

    )
}

export default IndexBottom;